import { ReactElement } from 'react'
import classNames from 'classnames'
import style from './tag.module.less'

export enum TagType {
  'normal',
  'success',
  'error',
  'primary',
  'warning',
  'processing'
}

interface Props {
  type?: TagType
  data: string | number
}

function Main ({ type: t = TagType.normal, data }: Props): ReactElement {
  const n = classNames(style.tag, {
    [style.success]: t === TagType.success,
    [style.error]: t === TagType.error,
    [style.primary]: t === TagType.primary,
    [style.processing]: t === TagType.processing,
    [style.warnging]: t === TagType.warning
  })
  if (typeof data !== 'string' || data.length === 0) {
    return <span />
  }
  return (
    <span className={n}>{data}</span>
  )
}

export default Main
